<template>
    <div class="main">
        <nav-bar
            v-show="isShowNavBar"
        />
        <div class="container" :style="containerStyle">
            <router-view></router-view>
        </div>
        <tab-bar
            v-show="isShowTabBar"
        />
        <pay-password-dialog/>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import TabBar from "./TabBar.vue";
import NavBar from "./NavBar.vue";
import PayPasswordDialog from "@/components/PayPasswordDialog.vue";
@Component({
    name: 'Main',
    components: {PayPasswordDialog, NavBar, TabBar}
})
export default class extends Vue {
    private get isShowNavBar(): boolean {
        return this.$store.state.navBarState;
    }
    private get isShowTabBar(): boolean {
        return this.$store.state.tabBarState;
    }
    private get containerStyle(): string {
        let style: string = `margin-top: ${this.isShowNavBar ? 0.88 : 0}rem;margin-bottom: ${this.isShowTabBar ? 1.08 : 0}rem;`;
        return style;
    }
}
</script>

<style scoped lang="less">
.main {
    & .container {
        padding: 0 0 0.2rem 0;
    }
}
</style>
